<template>
  <div class="credit_list_page">
    <div v-if="userType === 10">
      <div class="search_mod">
        <el-form>
          <div class="form_box">
            <div class="form_item m_b_20">
              <div class="key">授信编号:</div>
              <el-input class="value" v-model="form.code"></el-input>
            </div>
            <div class="form_item m_b_20">
              <div class="key">授信银行:</div>
              <el-input class="value" v-model="form.enterpriseBank"></el-input>
            </div>
            <div class="form_item m_b_20">
              <div class="key">状态:</div>
              <el-select class="value" v-model="form.status">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form_item">
              <div class="key">授信到期日:</div>
              <el-date-picker v-model="form.expireTime">
              </el-date-picker>
            </div>
            <div class="form_item">
              <div class="key">申请日期:</div>
              <el-date-picker v-model="form.createTime">
              </el-date-picker>
            </div>
            <div class="form_item">
              <div class="key"></div>
              <div class="value btns">
                <el-button type="primary" class="btn" @click="search">查询</el-button>
                <el-button class="btn reset_btn" @click="reset">重置</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="table_mod">
        <div class="title_box">
          <div class="title">
            <i class="icon"></i>
            授信列表
          </div>
          <div class="add_box">
            <el-button type="primary" @click="add">
              <i class="el-icon-plus"></i>
              申请授信
            </el-button>
          </div>
        </div>
        <el-table :data="tableData" v-loading="loading">
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            v-bind="item"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="look(scope.row.id)">{{ scope.row.auditInfo ? '审核' : '查看' }}</el-button>
              <el-button type="text" v-if="Number(scope.row.status) === 40" @click="edit(scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :hidden="pagination.total === 0"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.pageNum"
          :limit="10"
          @pagination="paginationChange"
        />
      </div>
    </div>
    <div v-if="userType === 50">
      <div class="search_mod">
        <el-form>
          <div class="form_box">
            <div class="form_item m_b_20">
              <div class="key">项目类型:</div>
              <el-input class="value" v-model="lockForm.pType"></el-input>
            </div>
            <div class="form_item m_b_20">
              <div class="key">合作企业名称:</div>
              <el-input class="value" v-model="lockForm.hexinName"></el-input>
            </div>
            <div class="form_item m_b_20">
              <div class="key">状态:</div>
              <el-select class="value" v-model="lockForm.status">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form_item">
              <div class="key">项目交付日期:</div>
              <el-date-picker v-model="lockForm.pDeliverDate">
              </el-date-picker>
            </div>
            <div class="form_item">
              <div class="key">申请日期:</div>
              <el-date-picker v-model="lockForm.createTime">
              </el-date-picker>
            </div>
            <div class="form_item">
              <div class="key"></div>
              <div class="value btns">
                <el-button type="primary" class="btn" @click="search">查询</el-button>
                <el-button class="btn reset_btn" @click="reset">重置</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="table_mod">
        <div class="title">
          <i class="icon"></i>
          账户锁定列表
        </div>
        <el-table :data="lockTableData" v-loading="loading">
          <el-table-column
            v-for="item in lockColumns"
            :key="item.prop"
            v-bind="item"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="check(scope.row.id)">
                审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :hidden="pagination.total === 0"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.pageNum"
          :limit="10"
          @pagination="paginationChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { creditList } from '@/api/production'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      statusList: [ // 审核状态 （"10", "待初审"), ("20", "待复审"), ("30", "成功"), ("40", "失败"）
        {
          label: '待初审',
          value: 10,
        },
        {
          label: '待复审',
          value: 20,
        },
        {
          label: '成功',
          value: 30,
        },
        {
          label: '失败',
          value: 40,
        },
      ],
      creditTypeList: [], // 授信类型列表
      form: {
        code: '',
        enterpriseBank: '',
        status: '',
        expireTime: '',
        createTime: '',
      },
      columns: [],
      tableData: [],
      lockForm: {
        pType: '',
        hexinName: '',
        status: '',
        pDeliverDate: '',
        createTime: '',
      },
      lockColumns: [],
      lockTableData: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      userType: '', // 用于判断是授信列表，还是锁定账户列表
    }
  },
  created() {
    this.columns = [
      {
        label: '序号',
        type: 'index'
      },
      {
        label: '授信类型',
        prop: 'creditType',
        formatter: (row, column, cellValue, index) => {
          return this.creditTypeList?.find((item) => cellValue === item.dictValue)?.dictLabel || ''
        }
      },
      {
        label: '授信银行',
        prop: 'jigouName',
      },
      {
        label: '授信总额度(元)',
        prop: 'creditTotalAmount',
      },
      {
        label: '已用授信(元)',
        prop: 'creditUsedAmount',
      },
      {
        label: '剩余授信(元)',
        prop: 'creditAvailableAmount',
      },
      {
        label: '授信到期日',
        prop: 'expireTime',
      },
      {
        label: '申请时间',
        prop: 'createTime',
      },
      {
        label: '状态',
        prop: 'status', // 审核状态 （"10", "待初审"), ("20", "待复审"), ("30", "成功"), ("40", "失败"）
        formatter: (row, column, cellValue, index) => {
          switch(Number(cellValue)) {
            case 10:
              return '待初审'
            case 20:
              return '待复审'
            case 30:
              return '成功'
            case 40:
              return '失败'
          }
        }
      },
    ]
    this.lockColumns = [
      {
        label: '序号',
        type: 'index'
      },
      {
        label: '项目类型',
        prop: 'pType',
      },
      {
        label: '合作企业名称',
        prop: 'hexinName',
      },
      {
        label: '项目名称',
        prop: 'pName',
      },
      {
        label: '项目总金额（元）',
        prop: 'pAmount',
      },
      {
        label: '项目交付日期',
        prop: 'pDeliverDate',
      },
      {
        label: '申请日期',
        prop: 'createTime',
      },
      {
        label: '状态',
        prop: 'status', // 审核状态 （"10", "待初审"), ("20", "待复审"), ("30", "成功"), ("40", "失败"）
        formatter: (row, column, cellValue, index) => {
          switch(Number(cellValue)) {
            case 10:
              return '待初审'
            case 20:
              return '待复审'
            case 30:
              return '成功'
            case 40:
              return '失败'
          }
        }
      },
    ]
  },
  watch: {
    '$route.path': {
      handler: function (newVal) {
        if (newVal.indexOf('lockCreditList') > -1) {
          this.userType = 50
        } else {
          this.userType = 10
        }
        console.log(this.userType)
      },
      immediate: true,
      deep: true,
    }
  },
  mounted() {
    this.getCreditType().then(() => {
      this.getCreditList()
    })
  },
  methods: {
    // 获取授信类型
    getCreditType() {
      return new Promise((resolve, reject) => {
        this.getDicts('credit').then((res) => {
          if (res.code === 200) {
            this.creditTypeList = res.data
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    search() {
      this.getCreditList()
    },
    reset() {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = ''
      })
    },
    getCreditList() {
      this.loading = true
      creditList({
        ...this.form,
        userType: this.userType,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.loading = false
        if (this.userType === 10) {
          this.tableData = res.rows
        } else {
          this.lockTableData = res.rows.map((item) => {
            console.log(item)
            return {
              hexinName: item.hexinName,
              ...(JSON.parse(item.projectInfo || '{}'))
            }
          })
        }
        this.pagination.total = res.total
      }).catch(() => {
        this.loading = false
      })
    },
    paginationChange({ page: pageNum, limit: pageSize }) {
      this.pagination.pageNum = pageNum
      this.pagination.pageSize = pageSize
      this.getCreditList()
    },
    add() {
      this.$router.push({
        path: '/productionCenter/jigouList'
      })
    },
    look(id) {
      this.$router.push({
        path: '/productionCenter/creditDetail',
        query: {
          id,
        }
      })
    },
    edit(id) {
      this.$router.push({
        path: '/productionCenter/addCredit',
        query: {
          id,
        }
      })
    },
    check(id) {
      this.$router.push({
        path: '/productionCenter/lockCreditDetail',
        query: {
          id,
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.mod {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 20px 16px 24px;
}
.credit_list_page {
  .search_mod {
    @extend .mod;
    .form_box {
      display: flex;
      flex-wrap: wrap;
      .form_item {
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.m_b_20 {
          margin-bottom: 20px;
        }
        .key {
          width: 140px;
          flex-shrink: 0;
          text-align: right;
          margin-right: 10px;
          color: #777;
          font-size: 14px;
        }
        ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
          flex: 1 1 auto;
        }
        .value {
          flex: 1 1 auto;
        }
        .btns {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .btn {
            width: 40%;
          }
        }
      }
    }
  }
  .table_mod {
    @extend .mod;
    .title_box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      .title {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        .icon {
          width: 3px;
          height: 16px;
          border-radius: 1px;
          background-color: $theme;
          margin-right: 5px;
        }
      }
      .add_box {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
